<template>
	<div>
		<el-tabs type="border-card" @tab-click="thisTabInfo" v-model="activeTab">
            <el-tab-pane label="基础资料" name="base">
                <el-form ref="form" :model="form.addProductInfo" :rules="rules.addProductInfo" label-width="100px">
		            <el-form-item label="企业名称" prop="name">
		                <el-input v-model="form.addProductInfo.name"></el-input>
		            </el-form-item>

		            <el-form-item label="主要技术路径" prop="techRoute">
		                <el-select v-model="form.addProductInfo.techRoute" multiple placeholder="请选择" style="width:100%">
		                    <el-option v-for="item in initData.techRoute" :key="item.value" :label="item.label" :value="item.value">
		                    </el-option>
		                </el-select>
		            </el-form-item>
					
					<el-form-item label="领域" prop="domain">
		                <el-select v-model="form.addProductInfo.domain" multiple placeholder="请选择" style="width:100%">
		                    <el-option v-for="item in initData.domain" :key="item.value" :label="item.label" :value="item.value">
		                    </el-option>
		                </el-select>
		            </el-form-item>

		            <el-form-item label="总体描述">
		                <script id="editor" type="text/plain"></script>
		            </el-form-item>

		        </el-form>
            </el-tab-pane>
            <el-tab-pane label="推荐设计方" name="design">
            	<el-table :data="form.designCompanyInfo" style="width: 100%">
			    	<el-table-column type="index" width="50"></el-table-column>
	                <el-table-column prop="id" label="企业名称">
	                </el-table-column>
	                <el-table-column prop="tags" label="标签">
	                </el-table-column>
	                <el-table-column prop="desc" label="描述">
	                </el-table-column>
	                <el-table-column label="操作">
			      		<template scope="scope">
		            		<el-button type="primary" size="small" @click="editRow(scope.$index,scope.row,'editProductHotCompany')">编辑</el-button>
		            		<el-button type="primary" size="small" @click="removeRow(scope.$index,scope.row)">移除</el-button>
	            		</template>
	                </el-table-column>
	            </el-table>
	            <div style="margin-top:20px;text-align:center">
	            	<el-button type="primary" @click="openDialog2('addProductHotCompany')">添加</el-button>
	            </div>
            </el-tab-pane>
            <el-tab-pane label="推荐咨询方" name="answer">
            	<el-table :data="form.answerCompanyInfo" style="width: 100%">
			    	<el-table-column type="index" width="50"></el-table-column>
	                <el-table-column prop="id" label="企业名称">
	                </el-table-column>
	                <el-table-column prop="tags" label="标签">
	                </el-table-column>
	                <el-table-column prop="desc" label="描述">
	                </el-table-column>
	                <el-table-column label="操作">
			      		<template scope="scope">
		            		<el-button type="primary" size="small" @click="editRow(scope.$index,scope.row,'editProductHotCompany')">编辑</el-button>
		            		<el-button type="primary" size="small" @click="removeRow(scope.$index,scope.row)">移除</el-button>
	            		</template>
	                </el-table-column>
	            </el-table>
	            <div style="margin-top:20px;text-align:center">
	            	<el-button type="primary" @click="openDialog2('addProductHotCompany')">添加</el-button>
	            </div>
            </el-tab-pane>
            <el-tab-pane label="推荐承建方" name="build">
            	<el-table :data="form.buildCompanyInfo" style="width: 100%">
			    	<el-table-column type="index" width="50"></el-table-column>
	                <el-table-column prop="id" label="企业名称">
	                </el-table-column>
	                <el-table-column prop="tags" label="标签">
	                </el-table-column>
	                <el-table-column prop="desc" label="描述">
	                </el-table-column>
	                <el-table-column label="操作">
			      		<template scope="scope">
		            		<el-button type="primary" size="small" @click="editRow(scope.$index,scope.row,'editProductHotCompany')">编辑</el-button>
		            		<el-button type="primary" size="small" @click="removeRow(scope.$index,scope.row)">移除</el-button>
	            		</template>
	                </el-table-column>
	            </el-table>
	            <div style="margin-top:20px;text-align:center">
	            	<el-button type="primary" @click="openDialog2('addProductHotCompany')">添加</el-button>
	            </div>
            </el-tab-pane>
            <el-tab-pane label="推荐资方" name="money">
            	<el-table :data="form.moneyCompanyInfo" style="width: 100%">
			    	<el-table-column type="index" width="50"></el-table-column>
	                <el-table-column prop="id" label="企业名称">
	                </el-table-column>
	                <el-table-column prop="tags" label="标签">
	                </el-table-column>
	                <el-table-column prop="desc" label="描述">
	                </el-table-column>
	                <el-table-column label="操作">
			      		<template scope="scope">
		            		<el-button type="primary" size="small" @click="editRow(scope.$index,scope.row,'editProductHotCompany')">编辑</el-button>
		            		<el-button type="primary" size="small" @click="removeRow(scope.$index,scope.row)">移除</el-button>
	            		</template>
	                </el-table-column>
	            </el-table>
	            <div style="margin-top:20px;text-align:center">
	            	<el-button type="primary" @click="openDialog2('addProductHotCompany')">添加</el-button>
	            </div>
            </el-tab-pane>
            <el-tab-pane label="推荐设备供应方" name="device">
            	<el-table :data="form.deviceCompanyInfo" style="width: 100%">
			    	<el-table-column type="index" width="50"></el-table-column>
	                <el-table-column prop="id" label="企业名称">
	                </el-table-column>
	                <el-table-column prop="tags" label="标签">
	                </el-table-column>
	                <el-table-column prop="desc" label="描述">
	                </el-table-column>
	                <el-table-column label="操作">
			      		<template scope="scope">
		            		<el-button type="primary" size="small" @click="editRow(scope.$index,scope.row,'editProductHotCompany')">编辑</el-button>
		            		<el-button type="primary" size="small" @click="removeRow(scope.$index,scope.row)">移除</el-button>
	            		</template>
	                </el-table-column>
	            </el-table>
	            <div style="margin-top:20px;text-align:center">
	            	<el-button type="primary" @click="openDialog2('addProductHotCompany')">添加</el-button>
	            </div>
            </el-tab-pane>
            <el-tab-pane label="推荐运维方" name="ops">
            	<el-table :data="form.opsCompanyInfo" style="width: 100%">
			    	<el-table-column type="index" width="50"></el-table-column>
	                <el-table-column prop="id" label="企业名称">
	                </el-table-column>
	                <el-table-column prop="tags" label="标签">
	                </el-table-column>
	                <el-table-column prop="desc" label="描述">
	                </el-table-column>
	                <el-table-column label="操作">
			      		<template scope="scope">
		            		<el-button type="primary" size="small" @click="editRow(scope.$index,scope.row,'editProductHotCompany')">编辑</el-button>
		            		<el-button type="primary" size="small" @click="removeRow(scope.$index,scope.row)">移除</el-button>
	            		</template>
	                </el-table-column>
	            </el-table>
	            <div style="margin-top:20px;text-align:center">
	            	<el-button type="primary" @click="openDialog2('addProductHotCompany')">添加</el-button>
	            </div>
            </el-tab-pane>
        </el-tabs>
        <div style="margin-top:20px;text-align:center">
        	<el-form>
				<el-form-item>
					<el-button type="warning" @click="closeDialog">取消</el-button>
					<el-button type="primary" @click="dialogBtnOk">提交</el-button>
				</el-form-item>
        	</el-form>
        </div>
		<!-- 添加推荐企业 -->
        <el-dialog title="添加推荐企业" :visible.sync="dialog.addProductHotCompany.open" :modal="false" size="small" v-if="dialog.addProductHotCompany.open">
			<addHotCompanyDialog @closeDialog="closeDialog2('addProductHotCompany')" @addProductHotCompanyInfo="addProductHotCompanyInfo"></addHotCompanyDialog>
        </el-dialog>

        <!-- 编辑推荐企业 -->
		<el-dialog title="编辑" :visible.sync="dialog.editProductHotCompany.open" :modal="false" size="small" v-if="dialog.editProductHotCompany.open">
			<editHotCompanyDialog :rowInfo="editHotCompanyRowInfo" @closeDialog="closeDialog2('editProductHotCompany')" @editProductHotCompanyInfo="editProductHotCompanyInfo"></editHotCompanyDialog>
		</el-dialog>
	</div>
</template>
<script>
import addHotCompanyDialog from '@/components/product/addHotCompanyDialog.vue'
import editHotCompanyDialog from '@/components/product/editHotCompanyDialog.vue'
export default{
	components:{addHotCompanyDialog,editHotCompanyDialog},
	data(){
		return{
			form:{
				addProductInfo:{
					name:'',
					techRoute:[],
					domain:[],
					content:'',
				},
				designCompanyInfo:[],
				answerCompanyInfo:[],
				buildCompanyInfo:[],
				moneyCompanyInfo:[],
				deviceCompanyInfo:[],
				opsCompanyInfo:[],
			},
			rules:{
				addProductInfo:{
					name:[
						{required:true,message:'请输入企业名称',trigger:'blur'},
					],
					techRoute:[
						{type:'array',required:true,message:'请至少选择一个领域',trigger:'change'},
					],
					domain:[
						{type:'array',required:true,message:'请至少选择一个领域',trigger:'change'},
					]
				}
			},
			initData:{
				techRoute:[],
				domain:[],
			},
            editor: null,
			dialog:{
				addProductHotCompany:{
					open:false
				},
				editProductHotCompany:{
					open:false
				}
			},
			formType:'',
			activeTab:'base',
			editHotCompanyRowInfo:'',
			editHotCompanyRowIndex:''
		}
	},
	mounted(){
		this.editor = UE.getEditor('editor')
        this.initData.techRoute = 
    	[
        	{value: '选项1',label: '黄金糕'}, 
        	{value: '选项2',label: '双皮奶'}
    	]
	    this.initData.domain = 
    	[
    		{value: '选项1',label: '黄金糕'}, 
        	{value: '选项2',label: '双皮奶'}
    	]
	},
	destroyed() {
        this.editor.destroy();
    },
	methods:{
		openDialog2(dialog){
			this.dialog[dialog].open = true
		},
		closeDialog(){
			this.$emit('closeDialog')
		},
		closeDialog2(dialog){
			this.dialog[dialog].open = false
		},
		dialogBtnOk(){
			//基础资料数据
			this.form.addProductInfo.content = this.editor.getContent()
			console.log(this.form.addProductInfo)
			//各方数据
			console.log(this.form.designCompanyInfo)
			console.log(this.form.answerCompanyInfo)
			console.log(this.form.buildCompanyInfo)
			console.log(this.form.moneyCompanyInfo)
			console.log(this.form.deviceCompanyInfo)
			console.log(this.form.opsCompanyInfo)
		},
		editRow(index,row,dialog){
			this.editHotCompanyRowInfo = row
			this.editHotCompanyRowIndex = index
			this.dialog[dialog].open = true
		},
		removeRow(index,row){
			this.$delete(this.form[this.formType],index)
		},
		addProductHotCompanyInfo(data){
			this.form[this.formType].push(data)
		},
		editProductHotCompanyInfo(data){
			this.$set(this.form[this.formType],this.editHotCompanyRowIndex,data)
		},
		thisTabInfo(tab){
			this.formType = tab.name+'CompanyInfo'
		}
	}
}	
</script>